<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--子组件显示个人信息 并有两个按钮 按下一个按钮显示对应人的信息 使用组件通信-->

<div id="app">
<cpninfo v-bind:cinfo="showinfo" v-on:switchshow="switchshow"></cpninfo>
</div>


<!--定义一个组件模板-->
<template id="cpninfo">
  <div>
<p v-for="item in cinfo">{{item}}</p>
    <button @click="btnclikc(1)">1</button>
    <button  @click="btnclikc(2)">2</button>
  </div>
</template>

  <script src="../js/vue.js"></script>
<script>


  //定义组件
  const cpninfo = {
    template:'#cpninfo',
    data(){
      return{

      }
    },
    props:{
      cinfo:{
        type:Object,
      },



    },
    methods: {
      btnclikc(value){
        console.log(value);
        //自定义事件
        this.$emit('switchshow',value)
      }
    }

  }




  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      info1:{
        name:'xiaoliang',
        age:24,
        height:1.8
      },
      info2:{
        name:'xiaoya',
        age:23,
        height:165
      },
      showinfo:{
        name:'default',
        age:'',
        height:'',
      }

    },
    methods:{
      switchshow(value){
          if (value==1){
            this.showinfo.age=this.info1.age;
            this.showinfo.name=this.info1.name;
            this.showinfo.height=this.info1.height;

          }else {
            this.showinfo.age=this.info2.age;
            this.showinfo.name=this.info2.name;
            this.showinfo.height=this.info2.height;
          }
      }

    },
    computed:{

    },
    components:{
      cpninfo,
    }
  })
</script>

</body>
</html>